<template>
    <div class="art_turn">
        <el-row class="title">
            <el-col :span="23"><div class="grid-content bg-purple"><h1>文章页轮播图</h1></div></el-col>
        </el-row>
        <el-row class="add_ptos">
            <el-col :span="23"><div class="grid-content bg-purple">
                <el-button type="primary" @click="dialogVisible = true">新增轮播图</el-button>
            </div></el-col>
        </el-row>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="title"
            label="图片"
            width="500">
        </el-table-column>
        <el-table-column
            label="操作"
            width="500">
            <el-button>上升</el-button>
            <el-button>上传</el-button>
            <el-button type="danger">删除</el-button>
        </el-table-column>
        </el-table>
        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="70%"
            :before-close="handleClose">
            <h2>新增 图片</h2>
            <div class="btn">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">选取文件</el-button>
                    <el-button size="small" type="success">上传服务器</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
                </el-upload>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
            title: ''
          }],
            dialogVisible: false,
            fileList: []
        }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
}
</script>

<style lang="scss" scoped>
    .art_turn{
        margin-top: 20px;
        padding-left: 20px;
        padding-right:11%;
        h1{
            margin-bottom: 30px;
        }
        h2{
            margin-bottom: 20px;
        }
    }
</style>
